$('#result').show();
function makeHead(){
    $("#rearch_head").css({ width: "100%",heigth:"80px", background:"url(img/header_bg.png)" });
    $("#rearch_head").addClass("navbar-fixed-top");
}
$(".search").animate({marginTop: '5px'}, "slow",makeHead);
$(".search").css({marginBottom: "10px"});
$("#result").css({marginTop: "50px"});
$('#title').attr('href', 'http://detail.tmall.com/item.htm?id=<%= @product.pid %>');
// $("#img1").attr('src', '<%= @product.img %>_350x350.jpg');
$('#title').html('<%= @product.title %>');
$('#price').html('￥<%= @prices[0].price %>');
// $("#img").attr("src", '<%= @product.img %>_350x350.jpg');
// $("#img").attr("src", 'http://192.168.56.101:3000/img/p.png');
// $('.carousel').carousel({
//   interval: 2000
// });

$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
$('#carousel').append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');

function clickImg(el, position, evt){
    alert("haha");
    return 0;

}
$('#carousel').elastislide({onClick : clickImg});
// var Carousels = function(){
//     return {
//         add :function() {
//           var carouselEl =$('#carousel'),carousel=carouselEl.elastislide();
//             carouselEl.append('<li><a href="#"><img src="<%= @product.img %>_350x350.jpg" alt="image03" /></a></li>');
//             carousel.add();  
//         }
//     };
// }();
var Charts = function() {

    return {
        //main function to initiate the module

        init: function() {



        },

        initCharts: function() {

            if (!jQuery.plot) {
                return;
            }
            //Interactive Chart

            function chart2() {
                function randValue() {
                    return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
                }
            function gd(year, month, day) {
                    return new Date(year, month-1, day,8,0,0,0).getTime();
                }

                var prices = [];
                var sales = [];
                <% @prices.each do |p | %>
                <% @date=Date.parse(p.created_at.to_s[0,10]) %>                      
                prices.push([gd(<%=@date.year%>,<%=@date.mon%>,<%=@date.mday%>),<%=p.price%>]);
                sales.push([gd(<%=@date.year%>,<%=@date.mon%>,<%=@date.mday%>),randValue()- 5]);
                <% end %>
               
                var plot = $.plot($("#chart_2"), [{
                    data: sales,
                    label: "销量",
                    yaxis: 2
                }, {
                    data: prices,
                    label: "价格"
                }], {
                    series: {
                        lines: {
                            show: true,
                            lineWidth: 2,
                            fill: true,
                            fillColor: {
                                colors: [{
                                    opacity: 0.05
                                }, {
                                    opacity: 0.01
                                }]
                            }
                        },
                        points: {
                            show: true
                        },
                        shadowSize: 2
                    },
                    grid: {
                        hoverable: true,
                        clickable: true,
                        tickColor: "#eee",
                        borderWidth: 0
                    },
                    colors: ["#d12610", "#37b7f3", "#52e136"],
                    xaxis: {
                         mode: "time",                         
                         timeformat: "%m-%d",
                         tickSize: [1,"day"]
                        
                    },
                    yaxis: {
                        ticks: 5,
                        tickDecimals: 0
                    },
                    xaxes: [{ position: "bottom" }],
                    yaxes: [{ position: "left" }, { position: "right"}]
                });


                function showTooltip(x, y, contents) {
                    $('<div id="tooltip">' + contents + '</div>').css({
                        position: 'absolute',
                        display: 'none',
                        top: y + 5,
                        left: x + 15,
                        border: '1px solid #333',
                        padding: '4px',
                        color: '#fff',
                        'border-radius': '3px',
                        'background-color': '#333',
                        opacity: 0.80
                    }).appendTo("body").fadeIn(200);
                }

                var previousPoint = null;
                $("#chart_2").bind("plothover", function(event, pos, item) {
                    // $("#x").text(pos.x.toFixed(2));
                    // console.log(pos);
                    // $("#y").text(pos.y.toFixed(2));

                    if (item) {
                        if (previousPoint != item.dataIndex) {
                            previousPoint = item.dataIndex;

                            $("#tooltip").remove();
                            if (item.series.label == '销量') {
                                var x = item.datapoint[0],
                                    y = item.datapoint[1],
                                    date = new Date(x),
                                    content=  "<strong>" + item.series.label + "</strong><br>"  +
                                               (date.getMonth() + 1) + "月" + date.getDate()+"日" +
                            " : <strong>" + y + "</strong> (件)";    
                            } else {
                                var x = item.datapoint[0],
                                    y = item.datapoint[1].toFixed(2),
                                    date = new Date(x),
                                    content=  "<strong>" + item.series.label + "</strong><br>"  +
                                               (date.getMonth() + 1) + "月" + date.getDate() +"日"+
                                                " : <strong>" + y + "</strong> (元)"; 

                            }


                            showTooltip(item.pageX, item.pageY,content);
                        }
                    } else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                });
            }
            //graph
            chart2();
        },
    };

}();


Charts.init();
Charts.initCharts();
// Carousels.add();